<!DOCTYPE html>
<html>


	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>


	<body>
		<canvas id="Mycanvas" width="1000" height="500"></canvas>
		<script type="text/javascript">
			var canvas = document.getElementById("Mycanvas");
			var ctx = canvas.getContext("2d");
			var Numbers = [
				[
					[0, 0, 1, 1, 1, 1, 1, 1, 0, 0],
					[0, 0, 1, 1, 1, 1, 1, 1, 0, 0],
					[0, 0, 1, 1, 0, 0, 1, 1, 0, 0],
					[0, 0, 1, 1, 0, 0, 1, 1, 0, 0],
					[0, 0, 1, 1, 0, 0, 1, 1, 0, 0],
					[0, 0, 1, 1, 0, 0, 1, 1, 0, 0],
					[0, 0, 1, 1, 0, 0, 1, 1, 0, 0],
					[0, 0, 1, 1, 0, 0, 1, 1, 0, 0],
					[0, 0, 1, 1, 1, 1, 1, 1, 0, 0],
					[0, 0, 1, 1, 1, 1, 1, 1, 0, 0]
				], //0
				[


					[0, 0, 0, 0, 1, 1, 0, 0, 0, 0],
					[0, 0, 0, 1, 1, 1, 0, 0, 0, 0],
					[0, 0, 1, 1, 1, 1, 0, 0, 0, 0],
					[0, 0, 0, 0, 1, 1, 0, 0, 0, 0],
					[0, 0, 0, 0, 1, 1, 0, 0, 0, 0],
					[0, 0, 0, 0, 1, 1, 0, 0, 0, 0],
					[0, 0, 0, 0, 1, 1, 0, 0, 0, 0],
					[0, 0, 0, 0, 1, 1, 0, 0, 0, 0],
					[0, 0, 1, 1, 1, 1, 1, 1, 0, 0],
					[0, 0, 1, 1, 1, 1, 1, 1, 0, 0]
				], //1
				[
					[0, 0, 1, 1, 1, 1, 1, 1, 0, 0],
					[0, 0, 1, 1, 1, 1, 1, 1, 0, 0],
					[0, 0, 0, 0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 0, 0, 0, 1, 1, 0, 0],
					[0, 0, 1, 1, 1, 1, 1, 1, 0, 0],
					[0, 0, 1, 1, 1, 1, 1, 1, 0, 0],
					[0, 0, 1, 1, 0, 0, 0, 0, 0, 0],
					[0, 0, 1, 1, 0, 0, 0, 0, 0, 0],
					[0, 0, 1, 1, 1, 1, 1, 1, 0, 0],
					[0, 0, 1, 1, 1, 1, 1, 1, 0, 0]
				], //2
				[
					[0, 0, 1, 1, 1, 1, 1, 1, 0, 0],
					[0, 0, 1, 1, 1, 1, 1, 1, 0, 0],
					[0, 0, 0, 0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 0, 0, 0, 1, 1, 0, 0],
					[0, 0, 1, 1, 1, 1, 1, 1, 0, 0],
					[0, 0, 1, 1, 1, 1, 1, 1, 0, 0],
					[0, 0, 0, 0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 0, 0, 0, 1, 1, 0, 0],
					[0, 0, 1, 1, 1, 1, 1, 1, 0, 0],
					[0, 0, 1, 1, 1, 1, 1, 1, 0, 0]
				], //3
				[
					[0, 0, 1, 1, 0, 0, 1, 1, 0, 0],
					[0, 0, 1, 1, 0, 0, 1, 1, 0, 0],
					[0, 0, 1, 1, 0, 0, 1, 1, 0, 0],
					[0, 0, 1, 1, 0, 0, 1, 1, 0, 0],
					[0, 0, 1, 1, 1, 1, 1, 1, 0, 0],
					[0, 0, 1, 1, 1, 1, 1, 1, 0, 0],
					[0, 0, 0, 0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 0, 0, 0, 1, 1, 0, 0]
				], //4
				[
					[0, 0, 1, 1, 1, 1, 1, 1, 0, 0],
					[0, 0, 1, 1, 1, 1, 1, 1, 0, 0],
					[0, 0, 1, 1, 0, 0, 0, 0, 0, 0],
					[0, 0, 1, 1, 0, 0, 0, 0, 0, 0],
					[0, 0, 1, 1, 1, 1, 1, 1, 0, 0],
					[0, 0, 1, 1, 1, 1, 1, 1, 0, 0],
					[0, 0, 0, 0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 0, 0, 0, 1, 1, 0, 0],
					[0, 0, 1, 1, 1, 1, 1, 1, 0, 0],
					[0, 0, 1, 1, 1, 1, 1, 1, 0, 0]
				], //5
				[
					[0, 0, 1, 1, 1, 1, 1, 1, 0, 0],
					[0, 0, 1, 1, 1, 1, 1, 1, 0, 0],
					[0, 0, 1, 1, 0, 0, 0, 0, 0, 0],
					[0, 0, 1, 1, 0, 0, 0, 0, 0, 0],
					[0, 0, 1, 1, 1, 1, 1, 1, 0, 0],
					[0, 0, 1, 1, 1, 1, 1, 1, 0, 0],
					[0, 0, 1, 1, 0, 0, 1, 1, 0, 0],
					[0, 0, 1, 1, 0, 0, 1, 1, 0, 0],
					[0, 0, 1, 1, 1, 1, 1, 1, 0, 0],
					[0, 0, 1, 1, 1, 1, 1, 1, 0, 0]
				], //6
				[
					[0, 0, 1, 1, 1, 1, 1, 1, 0, 0],
					[0, 0, 1, 1, 1, 1, 1, 1, 0, 0],
					[0, 0, 0, 0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 0, 0, 0, 1, 1, 0, 0]
				], //7
				[
					[0, 0, 1, 1, 1, 1, 1, 1, 0, 0],
					[0, 0, 1, 1, 1, 1, 1, 1, 0, 0],
					[0, 0, 1, 1, 0, 0, 1, 1, 0, 0],
					[0, 0, 1, 1, 0, 0, 1, 1, 0, 0],
					[0, 0, 1, 1, 1, 1, 1, 1, 0, 0],
					[0, 0, 1, 1, 1, 1, 1, 1, 0, 0],
					[0, 0, 1, 1, 0, 0, 1, 1, 0, 0],
					[0, 0, 1, 1, 0, 0, 1, 1, 0, 0],
					[0, 0, 1, 1, 1, 1, 1, 1, 0, 0],
					[0, 0, 1, 1, 1, 1, 1, 1, 0, 0]
				], //8
				[
					[0, 0, 1, 1, 1, 1, 1, 1, 0, 0],
					[0, 0, 1, 1, 1, 1, 1, 1, 0, 0],
					[0, 0, 1, 1, 0, 0, 1, 1, 0, 0],
					[0, 0, 1, 1, 0, 0, 1, 1, 0, 0],
					[0, 0, 1, 1, 1, 1, 1, 1, 0, 0],
					[0, 0, 1, 1, 1, 1, 1, 1, 0, 0],
					[0, 0, 0, 0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 0, 0, 0, 1, 1, 0, 0],
					[0, 0, 1, 1, 1, 1, 1, 1, 0, 0],
					[0, 0, 1, 1, 1, 1, 1, 1, 0, 0]
				], //9
				[
					[0, 0, 0, 0, 0, 0],
					[0, 0, 0, 0, 0, 0],
					[0, 0, 1, 1, 0, 0],
					[0, 0, 1, 1, 0, 0],
					[0, 0, 0, 0, 0, 0],
					[0, 0, 0, 0, 0, 0],
					[0, 0, 1, 1, 0, 0],
					[0, 0, 1, 1, 0, 0],
					[0, 0, 0, 0, 0, 0],
					[0, 0, 0, 0, 0, 0]
				] //0
			];
			var text = [1, 9, 10, 4, 2, 10, 5, 0];
			var img = new Image();
			img.src = "../img/1.jpg";
			var date = new Date();
			var balls = [];
			img.onload = function() {
				setInterval(function() {
					ctx.clearRect(0, 0, 1000, 500);
					ctx.drawImage(img, 0, 0);
					
					var time = new Date();
					
					if(time.getSeconds() != date.getSeconds()) {
						//秒数变了
						date = time;
						//添加小球
						for(var i = 0; i < 50; i++) {


							var vx = (Math.random() * 20) + 5;
							if(Math.random() > 0.5) {
								vx = -vx;
							}
							var vy = (Math.random() * 20) + 5;
							if(Math.random() > 0.5) {
								vy = -vy;
							}
							//设置rgb颜色
							var r = parseInt(Math.random() * 256);
							var g = parseInt(Math.random() * 256);
							var b = parseInt(Math.random() * 256);
							var a = Math.random();
							var color = "rgba(" + r + "," + g + "," + b + "," + a + ")";
							//x,y,r,vx,xy,color
							balls.push([700, 100, 7, vx, vy, color]);


						}


					}


					//打印改变以后的时间
					text[0] = parseInt(date.getHours() / 10);
					text[1] = date.getHours() % 10;
					text[3] = parseInt(date.getMinutes() / 10);
					text[4] = date.getMinutes() % 10;
					text[6] = parseInt(date.getSeconds() / 10);
					text[7] = date.getSeconds() % 10;
					for(var i = 0; i < text.length; i++) {
						if(i == 3 || i == 4) {
							drawNumber(i * 100 - 40, 10, text[i]);
						} else if(i == 5) {
							drawNumber(i * 100 - 40, 10, text[i]);
						} else if(i == 6 || i == 7) {
							drawNumber(i * 100 - 90, 10, text[i]);
						} else {
							drawNumber(i * 100 + 10, 10, text[i]);
						}
					}
					//打印小球
					drawBalls();
				}, 33);


				function drawBalls() {
					for(var i = 0; i < balls.length; i++) {
						ctx.beginPath();
						ctx.fillStyle = balls[i][5];
						ctx.arc(balls[i][0], balls[i][1], balls[i][2], 0, 2 * Math.PI);
						ctx.fill();
						balls[i][0] = balls[i][0] + balls[i][3];
						balls[i][1] = balls[i][1] + balls[i][4];
						balls[i][4] = balls[i][4] + 3;


					}


				}


				function drawNumber(arcx, arcy, Num) {
					var Number1 = Numbers[Num];
					var R = 7;
					var r = parseInt(Math.random() * 256);
					var g = parseInt(Math.random() * 256);
					var b = parseInt(Math.random() * 256);
					ctx.fillStyle = "white";
					//					rgb(" + r + "," + g + "," + b + ")


					for(var i = 0; i < Number1.length; i++) {
						var y = 2 * R * i + arcy;
						for(var j = 0; j < Number1[i].length; j++) {
							if(Number1[i][j] == 1) {
								ctx.beginPath();
								var x = j * 2 * R + arcx;
								ctx.arc(x, y, R, 0, 2 * Math.PI);
								ctx.fill();
							}
						}
					}
				}
			}
		</script>
	</body>


</html>